<template>
  <basic-dialog :visible="show"
                title="角色设定"
                min-width="682px"
                isShowBasicFooter
                @close="$emit('close')"
                @submit="_submit"
                :isFullScreen="false"
                :hasFooterMargin="false"
                :submitDisable="selectedRoleIds.length===0"
                :isShowInnerLoading="isSubmitting"
  >
    <q-form class="dialog-content" @submit.prevent="_submit">
      <div class="justify-between flex margin-20" style="margin-bottom: 10px">
        <!-- 左侧 -->
        <q-card class="left side margin-r-20 scroll-box" flat bordered>
          <div style="padding: 0 10px 10px"
               :style="{'padding-top': index ? 0 : '10px'}"
               v-for="(user, index) in users"
               :key="index">
            <q-chip
              clickable
              :removable="users.length > 1"
              outline
              square
              color="primary"
              text-color="black"
              :label="user.number + ' - ' + user.name"
              @remove="users.splice(index, 1)"
            />
            <q-tooltip>{{user.number}}-{{user.name}}</q-tooltip>
          </div>
        </q-card>
        <!-- 右侧 -->
        <q-card class="right side" flat>
          <div>
            <transfer
              v-model="selectedRoleIds"
              :source-data="roles"
              left-title="角色列表"
              right-title="已选角色"
            />
          </div>
        </q-card>
      </div>
    </q-form>
  </basic-dialog>
</template>

<script>
import Transfer from 'src/components/transfer'
import userManageApi from 'src/boot/system/user-manage'

export default {
  name: 'role-setting',
  components: {
    Transfer
  },
  props: {
    /**
     * 显示 dialog
     * default: false
     * required
     */
    show: {
      type: Boolean,
      default: false,
      required: true
    },

    /**
     * 选中的用户对象数组
     */
    selectedUsers: {
      type: Array,
      required: true
    },

    /**
     * 角色数组
     */
    roles: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      // form 正在提交
      isSubmitting: false,

      // 用户对象数组
      users: [],

      // 选中的角色
      selectedRoleIds: []
    }
  },
  methods: {
    /**
     * 提交 form
     * @private
     */
    _submit: function () {
      this.isSubmitting = true

      // build 请求参数
      let userIds = this.users.map(user => user.id)
      let roleIds = this.selectedRoleIds

      // 发送请求
      userManageApi.setUsersRoles(userIds, roleIds)
        .then(() => {
          this.$emit('submitted')
        })
        .finally(() => {
          this.isSubmitting = false
        })
    }
  },
  watch: {
    // 选中的用户
    selectedUsers: function (newVal) {
      // 从 props clone 到 data
      this.users = newVal.slice()
    },

    // 显隐状态
    show: function (newVal) {
      if (newVal) {
        this.users = this.selectedUsers.slice()
        // TODO 每次显示时，重新筛选 users 角色交集
      } else {
        // 隐藏时，清空已选的角色
        this.selectedRoleIds = []
      }
    }
  }
}
</script>

<style scoped lang="stylus">
  .side {
    height 482px
    overflow auto

    &.left {
      width 202px

      .inner-box {
        display flex
        flex-direction column
      }
    }

    &.right {
      width 420px
    }
  }
  >>>.q-chip {
    height 32px !important
    justify-content space-between
    margin 4px 0 !important
    max-width 100% !important
    width 100% !important

    &:first-child {
      margin-top: 0 !important
      max-width 100% !important
    }

    &:last-child {
      margin-bottom: 0 !important
    }

    &:focus {
      box-shadow none !important
    }

    .q-chip__content{
      color #000 !important
      line-height 32px !important
      display: block;
      word-break: keep-all;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .q-chip__icon--remove {
      margin-right -0.2em !important
      color #000 !important
      line-height 32px !important
    }
  }
</style>
